<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback">
			<view class="new">
				<view class="category-list">
					<navigator class="list b-f" hover-class="none" :url="'/pageShop/point/detail?goods_id=' + item.goods_id" v-for="(item, index) in list" :key="index">
						<view class="left">
							<view class="img"><image class="goodsImg" mode="scaleToFill" :src="item.goods_image"></image></view>
						</view>
						<view class="right">
							<view class="cont">
								<!-- 商品名称 -->
								<text class="title f-29 twolist-hidden">{{ item.goods_name }}</text>
								<!-- 商品价格 -->
								<view class="detail-price onelist-hidden">
									<text class="goods-price f-30 col-m point">{{ item.goods_sku.goods_price }}</text>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			list: []
		};
	},
	onLoad() {},
	methods: {
		upCallback(mescroll) {
			this.$u.api.getPointsGoodsList(mescroll.num).then(res => {
				const listData = res.data.list;
				if (mescroll.num == 1) {
					this.list = listData.data;
				} else {
					this.list.push(...listData.data);
				}
				this.mescroll.endBySize(listData.data.length, listData.total);
			});
		}
	}
};
</script>

<style>
.container {
	overflow: hidden;
}
.store_nav_cont {
	padding: 20rpx 0;
}

.store_nav_cont #list-true {
	color: #ff495e;
	font-size: 28rpx;
}

.store_nav_cont #list-0 {
	color: #333;
	font-size: 28rpx;
}

.store_nav_cont .price__text {
	font-size: 28rpx;
}
.store_nav_cont .price__arrow {
	padding-left: 20rpx;
	font-size: 18rpx;
	color: #777;
}

.store_nav_cont #list-true .price__arrow text.active {
	color: #ff495e;
}

.container {
	position: relative;
}

.index-cont-search icon {
	left: 0;
	margin-left: 20rpx;
}

.index-search-box {
	background: #fff;
	padding: 18rpx 13rpx;
	border-bottom: 1rpx solid #eee;
}

.index-search {
	border-bottom: 0;
	background: #fff;
	border-radius: 50rpx;
	overflow: hidden;
	position: relative;
	font-size: 32rpx;
	color: #999;
	box-sizing: border-box;
	height: 64rpx;
	line-height: 64rpx;
	margin: 0 10rpx;
}

.list-right {
	width: 60rpx;
}

.list-right text {
	height: 60rpx;
	line-height: 60rpx;
	font-size: 40rpx;
}

.list-header {
	position: fixed;
	top: calc(--window-top + 1rpx);
	left: 0;
	right: 0;
}

.no-more {
	text-align: center;
	color: #737373;
	padding: 20rpx 0;
}

.category-list {
	overflow: hidden;
}

.category-list .list {
	box-sizing: border-box;
	width: 50%;
	float: left;
}

.category-list .list:nth-child(2n) {
	border-left: 4rpx solid #f7f7f7;
	border-bottom: 8rpx solid #f7f7f7;
}

.category-list .list:nth-child(2n-1) {
	border-right: 4rpx solid #f7f7f7;
	border-bottom: 8rpx solid #f7f7f7;
}

.category-list .list .left,
.category-list .right {
	width: 100%;
}

.category-list .list .left .img image {
	width: 100%;
	height: 375rpx;
	display: block;
}

.category-list .right .cont {
	padding: 10rpx 12rpx;
}

.category-list .right .cont .title {
	height: 76rpx;
	line-height: 1.3;
}

.category-list.arrange .list {
	overflow: hidden;
	padding: 15rpx;
	border-bottom: 1rpx solid #f7f7f7;
	width: 100%;
}

.category-list.arrange .list text {
	line-height: 1.6;
}

.category-list.arrange .list .left {
	width: 35%;
	float: left;
}

.category-list.arrange .list .right {
	width: 65%;
	float: left;
}

.category-list.arrange .list .left .img image {
	width: 220rpx;
	height: 220rpx;
}

/* 商品卖点 */

.selling_point {
	width: 100%;
	font-size: 24rpx;
	line-height: 1.4;
	color: #ff495e;
}

.goods_sales {
	color: #999;
	font-size: 24rpx;
}

/* 商品价格 */

.detail-price {
	font-size: 24rpx;
}
.point::before{
	content: '积分：';
	font-size: 20rpx;
}

.detail-price .goods-price {
	margin-right: 8rpx;
}

.detail-price .line-price {
	text-decoration: line-through;
}
</style>
